Adwaita: undershoot simplification and tweaks

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 3e74a5be165aed2398269176bf479549a8373b66..0c6843730606ff47259d93e197ce1b498ec68b75 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3298,8 +3298,4 @@ GtkVolumeButton.button { padding: 8px; }
   &.right {
     @include undershoot(right);
   }
-
-  &.sidebar {
-    background-color: transparent; // otherwise it get inherited
-  }
 }

diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index 0fe49af4d994a9414d3b65c5f20592f64f4c1103..2e4ab36c0af69b31421358dc8b8dc04bb78f3e97 100644 (file)
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -589,12 +589,11 @@
 // top, bottom, right, left
 //
 
-  $_undershoot_color: transparentize($fg_color, 0.6);
-  $_undershoot_base: transparentize($base_color, 0.5);
+  $_undershoot_color_dark: transparentize(black, 0.8);
+  $_undershoot_color_light: transparentize(white, 0.8);
 
   $_gradient_dir: left;
   $_dash_bg_size: 10px 1px;
-  $_base_bg_size: 10px 1px;
   $_gradient_repeat: repeat-x;
   $_bg_pos: center $p;
 
@@ -603,22 +602,17 @@
   @if ($p == left) or ($p == right) {
     $_gradient_dir: top;
     $_dash_bg_size: 1px 10px;
-    $_base_bg_size: 1px 10px;
     $_gradient_repeat: repeat-y;
     $_bg_pos: $p center;
   }
 
-  background-image: linear-gradient(to $_gradient_dir, // this is the dash
-                                    $_undershoot_color 50%,
-                                    transparentize($_undershoot_color, 1) 50%),
-                    linear-gradient(to $_gradient_dir, // this is the dash base
-                                    $_undershoot_base 50%,
-                                    transparentize($_undershoot_base, 1) 50%);
+  background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
+                                    $_undershoot_color_light 50%,
+                                    $_undershoot_color_dark 50%);
 
-  border-#{$p}: 1px solid transparent;
   padding-#{$p}: 1px;
-  background-size: $_dash_bg_size, $_base_bg_size;
+  background-size: $_dash_bg_size;
   background-repeat: $_gradient_repeat;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: $_bg_pos;
 }

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index b66656c146682884e8e724c5bedf5e8342fff567..1a287769a4c2189dd33c4cfcdd42f0b21299260f 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -4415,42 +4415,36 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
 
 .undershoot.top {
   background-color: transparent;
-  background-image: linear-gradient(to left, rgba(238, 238, 236, 0.4) 50%, rgba(238, 238, 236, 0) 50%), linear-gradient(to left, rgba(41, 41, 41, 0.5) 50%, rgba(41, 41, 41, 0) 50%);
-  border-top: 1px solid transparent;
+  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-top: 1px;
-  background-size: 10px 1px, 10px 1px;
+  background-size: 10px 1px;
   background-repeat: repeat-x;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: center top; }
 .undershoot.bottom {
   background-color: transparent;
-  background-image: linear-gradient(to left, rgba(238, 238, 236, 0.4) 50%, rgba(238, 238, 236, 0) 50%), linear-gradient(to left, rgba(41, 41, 41, 0.5) 50%, rgba(41, 41, 41, 0) 50%);
-  border-bottom: 1px solid transparent;
+  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-bottom: 1px;
-  background-size: 10px 1px, 10px 1px;
+  background-size: 10px 1px;
   background-repeat: repeat-x;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: center bottom; }
 .undershoot.left {
   background-color: transparent;
-  background-image: linear-gradient(to top, rgba(238, 238, 236, 0.4) 50%, rgba(238, 238, 236, 0) 50%), linear-gradient(to top, rgba(41, 41, 41, 0.5) 50%, rgba(41, 41, 41, 0) 50%);
-  border-left: 1px solid transparent;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-left: 1px;
-  background-size: 1px 10px, 1px 10px;
+  background-size: 1px 10px;
   background-repeat: repeat-y;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: left center; }
 .undershoot.right {
   background-color: transparent;
-  background-image: linear-gradient(to top, rgba(238, 238, 236, 0.4) 50%, rgba(238, 238, 236, 0) 50%), linear-gradient(to top, rgba(41, 41, 41, 0.5) 50%, rgba(41, 41, 41, 0) 50%);
-  border-right: 1px solid transparent;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-right: 1px;
-  background-size: 1px 10px, 1px 10px;
+  background-size: 1px 10px;
   background-repeat: repeat-y;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: right center; }
-.undershoot.sidebar {
-  background-color: transparent; }
 
 /* GTK NAMED COLORS
    ----------------

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index f6c279ac3bd16e923dee22547e0e96d784053cc4..6b3ce5c524ecbc5b8c0b1655acbc9ee92dd87efb 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4588,42 +4588,36 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
 
 .undershoot.top {
   background-color: transparent;
-  background-image: linear-gradient(to left, rgba(46, 52, 54, 0.4) 50%, rgba(46, 52, 54, 0) 50%), linear-gradient(to left, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
-  border-top: 1px solid transparent;
+  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-top: 1px;
-  background-size: 10px 1px, 10px 1px;
+  background-size: 10px 1px;
   background-repeat: repeat-x;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: center top; }
 .undershoot.bottom {
   background-color: transparent;
-  background-image: linear-gradient(to left, rgba(46, 52, 54, 0.4) 50%, rgba(46, 52, 54, 0) 50%), linear-gradient(to left, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
-  border-bottom: 1px solid transparent;
+  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-bottom: 1px;
-  background-size: 10px 1px, 10px 1px;
+  background-size: 10px 1px;
   background-repeat: repeat-x;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: center bottom; }
 .undershoot.left {
   background-color: transparent;
-  background-image: linear-gradient(to top, rgba(46, 52, 54, 0.4) 50%, rgba(46, 52, 54, 0) 50%), linear-gradient(to top, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
-  border-left: 1px solid transparent;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-left: 1px;
-  background-size: 1px 10px, 1px 10px;
+  background-size: 1px 10px;
   background-repeat: repeat-y;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: left center; }
 .undershoot.right {
   background-color: transparent;
-  background-image: linear-gradient(to top, rgba(46, 52, 54, 0.4) 50%, rgba(46, 52, 54, 0) 50%), linear-gradient(to top, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
-  border-right: 1px solid transparent;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-right: 1px;
-  background-size: 1px 10px, 1px 10px;
+  background-size: 1px 10px;
   background-repeat: repeat-y;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: right center; }
-.undershoot.sidebar {
-  background-color: transparent; }
 
 /* GTK NAMED COLORS
    ----------------